<template>
  <div class="home-index">
    <ContentTitle :info="info" />
    <TopList :offlineTotal="offlineTotal" :lowBattery="lowBattery" :offline="offline" :sensorTotal="sensorTotal" :LoRaWANTotal="LoRaWANTotal" :LoRaPPTotal="LoRaPPTotal" :group="group"/>
    <list :listChart="listChart"/>
  </div>
</template>
<script setup>
import ContentTitle from "../../components/ContentTitle.vue";
import TopList from "./index/TopList.vue";
import list from "./index/list.vue";
import * as api from "@/api/index";
import { ref, onMounted, reactive ,onUpdated} from "vue";
const info = ref({
  text: "仪表盘",
  type: "",
  msg: "设备概览和传感数据可视化。",
});

//
let listChart = ref({});

//设备概括
const LoRaWANTotal = ref();
const LoRaPPTotal = ref();
const group = ref();
const sensorTotal = ref();
const offlineTotal = ref();
const offline = ref();
const lowBattery = ref();
const deviceCount = () => {
  api.$deviceCount().then((res) => {
    LoRaWANTotal.value = res.data.LoRaWAN.total;
    LoRaPPTotal.value = res.data.LoRaPP.total;
    sensorTotal.value = res.data.sensor.total;
    offlineTotal.value = res.data.LoRaPP.offline +  res.data.LoRaWAN.offline
    group.value = res.data.group; 
    offline.value = res.data.sensor.offline; 
    lowBattery.value = res.data.sensor.lowBattery; 
  });
  api.$sensorCount().then(res=>{
    console.log(res.data); 
    listChart.value = res.data.air;
  })
};

onMounted(deviceCount);
</script>
<style lang="less">
@import './index.less';
</style>